<template>
  <div class="channelmanagement">
    <van-nav-bar title="频道管理" class="nav">
      <template #right>
        <van-icon name="cross" size="0.5rem" class="cross" @click="back" />
      </template>
    </van-nav-bar>
    <van-cell :title="title" class="channels">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #default
        ><div class="bianji" @click="bianji">{{ msg }}</div></template
      >
      <template #icon><div class="mychannel">我的频道</div></template>
    </van-cell>
    <van-row type="flex" gutter="20" class="ccc">
      <van-col
        span="5"
        v-for="(item, index) in channelList"
        :key="index"
        @click.stop="btn(item)"
        class="cc"
        >{{ item.name }}
        <van-icon
          name="cross"
          class="cross1"
          v-show="is == true && item.id !== 0"
          @click.stop="detelechannel(item)"
      /></van-col>
    </van-row>
    <van-cell title="点击添加更多频道" class="channels channels1">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
    </van-cell>
    <van-row type="flex" gutter="20" class="ccc">
      <van-col
        span="5"
        v-for="item in unselect"
        :key="item.id"
        class="cc"
        @click="addchannel(item)"
        >{{ item.name }}</van-col
      >
    </van-row>
  </div>
</template>

<script>
import { getAllChannels } from '../../api/channel'
export default {
  // 组件名称
  name: 'channelmanagement',
  // 组件参数 接收来自父组件的数据
  props: {
    channelList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  // 局部注册的组件
  components: {},
  // 组件状态值
  data () {
    return {
      arr: [],
      is: false,
      msg: '编辑',
      title: '点击进入频道'
    }
  },
  methods: {
    // 关闭遮罩层按钮
    back () {
      this.$emit('back')
    },
    // 点击进入频道功能
    btn (item) {
      this.$emit('move', item)
    },
    // 点击切换编辑删除频道功能
    bianji () {
      this.is = !this.is
      if (this.is) {
        this.msg = '完成'
        this.title = '点击删除频道'
      } else {
        this.msg = '编辑'
        this.title = '点击进入频道'
      }
    },
    // 删除频道功能,传给父组件home,在channellist列表中删除
    detelechannel (item) {
      if (this.is == false) {
        this.$toast.fail('请点击编辑')
        return
      }
      this.$emit('remove', item)
    },
    // 添加频道功能,传给父组件home,添加到channellist列表中
    addchannel (item) {
      if (this.is == false) {
        this.$toast.fail('请点击编辑')
        return
      }
      this.$emit('add', item)
    }
  },
  // 获取全部频道功能
  async created () {
    const arr = await getAllChannels()
    this.arr = arr.data.data.channels
  },
  computed: {
    // 计算出不同的数组 频道数据
    unselect () {
      return this.arr.filter(obj => {
        if (this.channelList.some(item => item.id === obj.id)) {
          return false
        } else {
          return true
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.cross {
  color: #fff;
}
.channels {
  font-size: 12px;
  padding: 5px;
  color: gray;
}
.bianji {
  font-size: 14px;
  color: #000;
}
.mychannel {
  font-size: 14px;
  margin-right: 5px;
  color: #000;
}
/deep/ .van-col--5 {
  background-color: #fafafa;
  font-size: 13px;
  margin: 5px;
  text-align: center;
  height: 40px;
  width: 82px;
  line-height: 40px;
  padding: 0 !important;
  border: 1px solid #eee;
}
.cc {
  position: relative;
  border-radius: 2px;
}
.ccc {
  padding-left: 4px;
}
.nav {
  height: 44px;
}
.cross1 {
  position: absolute;
  top: 0;
  right: 0;
}
.channels1 {
  font-size: 13px;
  color: #000;
}
</style>
